<%--
  Created by IntelliJ IDEA.
  User: duanzx
  Date: 2021/2/19
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>极光游戏（CLIPJOINT.COM）-全方位正版游戏服务平台</title>
    <link rel="stylesheet" type="text/css" href="${ bp }/static/css/register.css">
    <link rel="shortcut icon" href="${ bp }/static/image/favicon.ico" />
</head>
<body>
    <div class="top">
        <span class="show">您的位置：</span>
        <a href="/" class="index">首页 》</a>
        <a href="register.jsp" class="register">注册</a>
    </div>

    <div class="sign">
        <div class="tab">
            <p>邮箱注册</p>
        </div>
        <div class="from">
            <div class="from-body">
                <form action="${ bp }/user?method=register" method="post" id="registerForm">
                    <div class="from-input">
                        <label class="label-item">邮箱：</label>
                        <div>
                            <input class="input-text" type="text" name="email" value="${ param.email }" placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="from-input">
                        <label class="label-item">邮箱验证码：</label>
                        <div>
                            <input class="input-code" type="text" name="code" maxlength="6" placeholder="请输入邮箱验证码">
                            <div class="code-btn">
                                <button class="orange" id="emailBtn">获取邮箱验证码</button>
                            </div>
                        </div>
                    </div>
                    <div class="from-input">
                        <label class="label-item">密码：</label>
                        <div>
                            <input class="input-text" type="password" name="password" id="password" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="from-input">
                        <label class="label-item">确认密码：</label>
                        <idv>
                            <input class="input-text" type="password" name="repassword" placeholder="请再次填写密码">
                        </idv>
                    </div>
                    <div class="agree">
                        <span>我同意</span>
                        <a href="" class="agree-about">《黑店游戏服务协议》</a>
                        <span>和</span>
                        <a href="" class="agree-about">《黑店隐私协议》</a>
                    </div>
                    <div class="submit-btn">
                        <input class="submit orange" type="submit" value="注册">
                    </div>
                    <div>
                        <span>${ msg }</span>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 公共底部 -->
    <%@ include file="../common/footer.jsp" %>

    <script src="${ bp }/static/js/jquery-3.5.1.js"></script>
    <script src="${ bp }/static/js/jquery.validate.min.js"></script>
    <script type="text/javascript">
        $(function() {

            // 添加自定义校验
            $.validator.addMethod("emailUnique", function(value, element) {
                let result = false;
                // ajax请求后端，判断用户名是否存在
                // 发送Ajax请求
                $.ajax({
                    url: '${ bp }/user?method=checkEmail',
                    type: 'post',
                    data: {
                        email: value
                    },
                    dataType: 'json',
                    async: false,
                    success: function(res) {
                        result = (res.code === 0);
                    },
                    error: function() {
                        console.log('接口请求失败');
                    }
                });
                return this.optional(element) || result;
            });

            // https://www.runoob.com/jquery/jquery-plugin-validate.html
            // 开启表单验证
            $('#registerForm').validate({
                // 验证规则
                rules: {
                    email: {
                        required: true,
                        rangelength: [5,20],
                        emailUnique: true
                    },
                    code: {
                        required: true,
                        rangelength: [6,6],
                    },
                    password: {
                        required: true,
                        rangelength: [6,18]
                    },
                    repassword: {
                        equalTo: '#password'
                    }
                },
                // 提示信息
                messages: {
                    email: {
                        required: '邮箱不能为空',
                        rangelength: '请输入一个正确的邮箱',
                        emailUnique: '改邮箱已经注册'
                    },
                    code: {
                        required: '请填写邮箱验证码',
                        rangelength: '无效的验证码',
                    },
                    password: {
                        required: '密码不能为空',
                        rangelength: '密码必须是6到18个字符'
                    },
                    repassword: {
                        equalTo: '请再次输入正确的密码'
                    }
                }
            });

            // 发送验证码
            $('#emailBtn').click(function() {
                $('#emailBtn').attr("disabled", "disabled");
                $.ajax({
                    url: '${ bp }/email?method=sendRegisterCode',
                    type: 'post',
                    data: {
                        email: $('[name="email"]').val()
                    },
                    dataType: 'json',
                    success: function(res) {
                        alert(res.msg);
                        $('#emailBtn').removeAttr("disabled");
                    },
                    error: function() {
                        console.log('接口请求失败');
                    }
                });
            });

        })
    </script>
</body>
</html>
